<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../../css/person/focuson.css">
</head>

<body>
    <!--导航-->
    <div class="container-fluid">
        <!-- 使页面铺满整个屏幕 -->
        <div class="row">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-brand" style="margin-left:10px">
                        <img src="img" href="#"></a>
                    </div>
                    <div class="navbar-brand" style="margin-left:10px">
                        <form class="form-horizontal" role="form">
                            <div class="form-group has-feedback">
                                <div class="modal-md">
                                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                                    <input id="search" type="text" class="form-control input-lg" placeholder="搜'柴犬'试试">
                                </div>
                            </div>
                        </form>
                    </div>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="pure-menu-selected"><a href="../index.html" class="mynav-underline-active"><b>首页</b></a></li>
                        <li><a href="#" class="nav-underline"><b>论坛</b></a></li>
                        <li><a href="#" class="nav-underline"><b>宠物动态</b></a></li>
                        <li><a href="#" class="nav-underline"><b>二手市场</b></a></li>
                        <li><a href="#" class="nav-underline"><b>趣味专区</b></a></li>
                        <li><a href="#" class="nav-underline"><b>消息中心</b></a></li>
                        <li><a href="person.html" class="nav-underline"><b>我的</b></a></li>

                    </ul>
                </div>
            </nav>

        </div>
    </div>


    <!-- 主体部分 -->
    <div class="container">
        <div class="zt-header">
            <div class="zt-headerimg">
                <img src="../../imgs/person/tx.jpg" style="height: 160px;widows: 160px" class="zt-tx">
            </div>
        </div>
        <div class="zt-xheader">
            <span>如我西沉</span>
            <button type="button" class="btn btn-default" data-toggle="button" style="margin-left: 400px" onclick="window.location.href='data.html'"> 添加宠物
            </button>
            <button type="button" class="btn btn-default" data-toggle="button" onclick="window.location.href='data.html'"> 个人资料
            </button>
            <button type="button" class="btn btn-default" data-toggle="button"> 我的草稿
            </button>
            <br>
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                <span class="glyphicon glyphicon-chevron-down" style="line-height: 40px;">&nbsp;更多资料信息</span></a>
            <div id="collapseThree" class="panel-collapse collapse">
                <table width="400">
                    <tr>
                        <td>所在地</td>
                        <td>苏州&nbsp;工业园区</td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>女</td>
                    </tr>
                    <tr>
                        <td>注册时间</td>
                        <td>2012.08.18&nbsp;14:52:23</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>



    <div class="container" style="width: 1015px">
        <div class="pet-list">
            <span>我的宠物:</span>
            <ul>
                <li>
                    <img src="../../imgs/person/tx.jpg" alt="">
                    <span style="color: #999;
                        font-size: 12px;">小虎</span>

                </li>
                <li>
                    <img src="../../imgs/person/tx.jpg" alt="">
                    <span style="color: #999;
                        font-size: 12px;">小虎</span>
                </li>
            </ul>
        </div>

        <div class="col-sm-6 col-md-9" style="margin-top: 20px;background-color: #fff;margin-bottom: 5px;">
            <p class="guan gactive" id="focuson1">我的关注</p>
            <p class="guan" id="focuson2">我的粉丝</p><br>
            <div id="foc1">
                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;聊一聊</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然；曾获第33届大众电影百花奖最佳男配角奖、第29...</p>
                    </div>

                    <hr class="hrLine" style="width:100%;" />
                </div>



                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;聊一聊</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然；曾获第33届大众电影百花奖最佳男配角奖、第29...</p>
                    </div>

                    <hr class="hrLine" style="width:100%;" />
                </div>


                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;聊一聊</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然；曾获第33届大众电影百花奖最佳男配角奖、第29...</p>
                    </div>

                    <hr class="hrLine" style="width:100%;" />
                </div>


                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;聊一聊</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然；曾获第33届大众电影百花奖最佳男配角奖、第29...</p>
                    </div>

                    <hr class="hrLine" style="width:100%;" />
                </div>


                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;聊一聊</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然；曾获第33届大众电影百花奖最佳男配角奖、第29...</p>
                    </div>

                    <hr class="hrLine" style="width:100%;" />
                </div>



                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;聊一聊</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然；曾获第33届大众电影百花奖最佳男配角奖、第29...</p>
                    </div>
                    <hr class="hrLine" style="width:100%;" />
                </div>


                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;聊一聊</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">
                            李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手；曾获第33届大众电影百花奖最佳男配角奖、第29...
                        </p>
                    </div>
                    <hr class="hrLine" style="width:100%;" />
                </div>
            </div>



            <!-- 粉丝 -->
            <div id="foc2" style="display:none;">
                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;关注</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">赵丽颖，内地新生代当红女演员，澳门电视节金莲花最佳电视女主角，第十届金鹰女神;，第28届中国电视金鹰奖观众喜...</p>
                    </div>

                    <hr class="hrLine" style="width:100%;" />
                </div>



                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;关注</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">赵丽颖，内地新生代当红女演员，澳门电视节金莲花最佳电视女主角，第十届金鹰女神;，第28届中国电视金鹰奖观众喜...</p>
                    </div>

                    <hr class="hrLine" style="width:100%;" />
                </div>


                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;关注</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">赵丽颖，内地新生代当红女演员，澳门电视节金莲花最佳电视女主角，第十届金鹰女神;，第28届中国电视金鹰奖观众喜...</p>
                    </div>

                    <hr class="hrLine" style="width:100%;" />
                </div>


                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;关注</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然；曾获第33届大众电影百花奖最佳男配角奖、第29...</p>
                    </div>

                    <hr class="hrLine" style="width:100%;" />
                </div>


                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;关注</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然；曾获第33届大众电影百花奖最佳男配角奖、第29...</p>
                    </div>

                    <hr class="hrLine" style="width:100%;" />
                </div>



                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;关注</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然；曾获第33届大众电影百花奖最佳男配角奖、第29...</p>
                    </div>
                    <hr class="hrLine" style="width:100%;" />
                </div>


                <div>
                    <div style="float: left;">
                        <img src="../../imgs/person/tx.jpg" class="gimg">
                    </div>

                    <div style="margin-left: 72px;margin-top: 12px;">
                        <a href="" class="gimga">GDragon</a>
                        <!-- 按钮 -->
                        <p style="float: right;margin-top: 5px;margin-right: 5px;">
                            <button type="button" class="btn btn-default btn-sm">+&nbsp;关注</button>
                        </p>
                    </div>
                    <div style="margin-left: 72px">
                        <span style="color: #666666">简介:</span>
                        <p class="wt">
                            李易峰，中国男演员、歌手。歌手出道，2009年起涉足影视成绩斐然国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手国男演员、歌手。歌手；曾获第33届大众电影百花奖最佳男配角奖、第29...
                        </p>
                    </div>
                    <hr class="hrLine" style="width:100%;" />
                </div>
            </div>


            <div class="page">
                <a href="#" class="prev">&lt;</a>
                <a href="#" class="active">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <a href="#" class="next">&gt;</a>
        </div>

        </div>


        <!-- 右边 -->

        <div class="col-md-3 " style="margin-top: 20px;">
            <div class="gcard" style="background-color: #fff;">
                我的成就
            </div>

            <div style="padding: 12px 0; color: #646464;background-color: #fff;">
                <div style="padding: 6px 20px;">
                    <span class="glyphicon glyphicon-thumbs-up">
                        获得了2888个赞
                    </span>
                </div>
                <div style="padding: 6px 20px;">
                    <span class="glyphicon glyphicon-comment">
                        获得了26个评论
                    </span>
                </div>
            </div>

            <div class="gcard" style="align-items:unset;padding-left: 0px;">
                <div style="display: flex;padding: 12px 0;">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" style="width: 110px;height:85px" onclick="window.location.href='focuson.html'">
                            关注了289人
                        </button>
                        <button class="btn btn-default" type="button" style="width: 110px;height:85px" onclick="window.location.href='focuson.html'">
                            粉丝500人
                        </button>
                    </span>

                </div>
            </div>
        </div>
    </div>

    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>
    <script src="../../js/person/person.js"></script>

</body>

</html>